diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 614068fb..e9721a29 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -32,6 +32,7 @@
     "downshift": "^8.3.2",
     "eslint-config-react-app": "^7.0.1",
     "gql-client": "^1.0.0",
+    "lottie-react": "^2.4.0",
     "luxon": "^3.4.4",
     "octokit": "^3.1.2",
     "react": "^18.2.0",
diff --git a/packages/frontend/public/lottie/logo.json b/packages/frontend/public/lottie/logo.json
new file mode 100644
index 00000000..f3b02a22
--- /dev/null
+++ b/packages/frontend/public/lottie/logo.json
@@ -0,0 +1 @@
+{"nm":"logo","v":"5.9.6","fr":60,"ip":0,"op":128.60000000000002,"w":40,"h":40,"ddd":0,"markers":[],"assets":[{"nm":"icon","fr":60,"id":"538:1272","layers":[{"ty":3,"ddd":0,"ind":5,"hd":false,"nm":"icon - Null","ks":{"a":{"a":0,"k":[14,14]},"o":{"a":0,"k":100},"p":{"a":0,"k":[19.5,20]},"r":{"a":0,"k":0},"s":{"a":1,"k":[{"t":83.39999999999999,"s":[-0.1,-0.1],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]}},{"t":129.60000000000002,"s":[100,100]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ty":4,"ddd":0,"ind":6,"hd":false,"nm":"logo - Shape Mask","ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":0,"op":129.60000000000002,"bm":0,"sr":1,"shapes":[{"ty":"gr","nm":"Group","hd":false,"np":3,"it":[{"ty":"sh","nm":"Path","hd":false,"ks":{"a":0,"k":{"c":true,"v":[[12,0],[28,0],[40,12],[40,28],[28,40],[12,40],[0,28],[0,12],[12,0],[12,0]],"i":[[0,0],[0,0],[0,-6.6274],[0,0],[6.6274,0],[0,0],[0,6.6274],[0,0],[-6.6274,0],[0,0]],"o":[[0,0],[6.627420000000001,0],[0,0],[0,6.627420000000001],[0,0],[-6.62742,0],[0,0],[0,-6.62742],[0,0],[0,0]]}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0,1,0,1]},"nm":"Fill","hd":false,"r":1},{"ty":"tr","a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]}]},{"nm":"check, checmark","fr":60,"id":"538:1273","layers":[{"ty":3,"ddd":0,"ind":7,"hd":false,"nm":"icon - Null","ks":{"a":{"a":0,"k":[14,14]},"o":{"a":0,"k":100},"p":{"a":0,"k":[19.5,20]},"r":{"a":0,"k":0},"s":{"a":1,"k":[{"t":83.39999999999999,"s":[-0.1,-0.1],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]}},{"t":129.60000000000002,"s":[100,100]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ty":3,"ddd":0,"ind":8,"hd":false,"nm":"check, checmark - Null","parent":7,"ks":{"a":{"a":0,"k":[6,6]},"o":{"a":0,"k":100},"p":{"a":0,"k":[14,14]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ddd":0,"ind":9,"ty":0,"nm":"icon","td":1,"refId":"538:1272","sr":1,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"ao":0,"w":40,"h":40,"ip":0,"op":129.60000000000002,"st":0,"hd":false,"bm":0},{"ty":4,"ddd":0,"ind":10,"hd":false,"nm":"check, checmark - Shape Mask","parent":8,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"st":0,"ip":75,"op":240,"bm":0,"sr":1,"shapes":[{"ty":"gr","nm":"Group","hd":false,"np":3,"it":[{"ty":"sh","nm":"Path","hd":false,"ks":{"a":0,"k":{"c":true,"v":[[0,0],[12,0],[12,0],[12,12],[12,12],[0,12],[0,12],[0,0]],"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]]}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0,1,0,1]},"nm":"Fill","hd":false,"r":1},{"ty":"tr","a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"tt":1}]},{"nm":"check, checmark","fr":60,"id":"ltgojk9vajqo3xuqysw","layers":[{"ty":3,"ddd":0,"ind":21,"hd":false,"nm":"icon - Null","ks":{"a":{"a":0,"k":[14,14]},"o":{"a":0,"k":100},"p":{"a":0,"k":[19.5,20]},"r":{"a":0,"k":0},"s":{"a":1,"k":[{"t":83.39999999999999,"s":[-0.1,-0.1],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]}},{"t":129.60000000000002,"s":[100,100]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ty":3,"ddd":0,"ind":22,"hd":false,"nm":"check, checmark - Null","parent":21,"ks":{"a":{"a":0,"k":[6,6]},"o":{"a":0,"k":100},"p":{"a":0,"k":[14,14]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ty":3,"ddd":0,"ind":15,"hd":false,"nm":"Icon - Null","parent":22,"ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[1.5,2]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ddd":0,"ind":16,"hd":false,"nm":"Icon - Stroke","parent":15,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"st":0,"ip":75,"op":240,"bm":0,"sr":1,"ty":4,"shapes":[{"ty":"gr","nm":"Group","hd":false,"np":3,"it":[{"ty":"sh","nm":"Path","hd":false,"ks":{"a":0,"k":{"c":false,"v":[[0,5.5],[3.1471,8],[9,0]],"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]]}}},{"ty":"st","o":{"a":0,"k":100},"w":{"a":0,"k":2},"c":{"a":0,"k":[0.24705882352941178,0.5058823529411764,0.9254901960784314,1]},"ml":4,"lc":2,"lj":2,"nm":"Stroke","hd":false},{"ty":"tr","a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","nm":"Group","hd":false,"np":3,"it":[{"ty":"rc","nm":"Rectangle","hd":false,"p":{"a":0,"k":[5.5,5]},"s":{"a":0,"k":[22,20]},"r":{"a":0,"k":0}},{"ty":"fl","o":{"a":0,"k":0},"c":{"a":0,"k":[0,1,0,1]},"nm":"Fill","hd":false,"r":1},{"ty":"tr","a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]}]},{"nm":"[FRAME] icon - Null / icon - Stroke / icon - Null / check, checmark - Null / icon - Null / check, checmark - Null / check, checmark / check, checmark / icon","fr":60,"id":"ltgojk9svnf3mrgghfq","layers":[{"ty":3,"ddd":0,"ind":17,"hd":false,"nm":"icon - Null","ks":{"a":{"a":0,"k":[14,14]},"o":{"a":0,"k":100},"p":{"a":0,"k":[19.5,20]},"r":{"a":0,"k":0},"s":{"a":1,"k":[{"t":83.39999999999999,"s":[-0.1,-0.1],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]}},{"t":129.60000000000002,"s":[100,100]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ddd":0,"ind":18,"hd":false,"nm":"icon - Stroke","parent":17,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"st":0,"ip":75,"op":240,"bm":0,"sr":1,"ty":4,"shapes":[{"ty":"gr","nm":"Group","hd":false,"np":3,"it":[{"ty":"sh","nm":"Path","hd":false,"ks":{"a":0,"k":{"c":true,"v":[[14,0],[14,0],[28,14],[28,14],[14,28],[14,28],[0,14],[0,14],[14,0],[14,0]],"i":[[0,0],[0,0],[0,-7.732],[0,0],[7.732,0],[0,0],[0,7.732],[0,0],[-7.732,0],[0,0]],"o":[[0,0],[7.73199,0],[0,0],[0,7.73199],[0,0],[-7.73199,0],[0,0],[0,-7.73199],[0,0],[0,0]]}}},{"ty":"st","o":{"a":0,"k":6},"w":{"a":0,"k":2},"c":{"a":0,"k":[0.03137254901960784,0.1843137254901961,0.33725490196078434,1]},"ml":4,"lc":1,"lj":1,"nm":"Stroke","hd":false},{"ty":"tr","a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","nm":"Group","hd":false,"np":3,"it":[{"ty":"rc","nm":"Rectangle","hd":false,"p":{"a":0,"k":[14.5,14.5]},"s":{"a":0,"k":[58,58]},"r":{"a":0,"k":0}},{"ty":"fl","o":{"a":0,"k":0},"c":{"a":0,"k":[0,1,0,1]},"nm":"Fill","hd":false,"r":1},{"ty":"tr","a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"hasMask":true,"masksProperties":[{"nm":"Mask","pt":{"a":0,"k":{"c":true,"v":[[14,0],[14,0],[28,14],[28,14],[14,28],[14,28],[0,14],[0,14],[14,0],[14,0]],"i":[[0,0],[0,0],[0,-7.732],[0,0],[7.732,0],[0,0],[0,7.732],[0,0],[-7.732,0],[0,0]],"o":[[0,0],[7.73199,0],[0,0],[0,7.73199],[0,0],[-7.73199,0],[0,0],[0,-7.73199],[0,0],[0,0]]}},"o":{"a":0,"k":100},"mode":"a","x":{"a":0,"k":0}}]},{"ty":3,"ddd":0,"ind":19,"hd":false,"nm":"icon - Null","ks":{"a":{"a":0,"k":[14,14]},"o":{"a":0,"k":100},"p":{"a":0,"k":[19.5,20]},"r":{"a":0,"k":0},"s":{"a":1,"k":[{"t":83.39999999999999,"s":[-0.1,-0.1],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]}},{"t":129.60000000000002,"s":[100,100]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ty":3,"ddd":0,"ind":20,"hd":false,"nm":"check, checmark - Null","parent":19,"ks":{"a":{"a":0,"k":[6,6]},"o":{"a":0,"k":100},"p":{"a":0,"k":[14,14]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ty":3,"ddd":0,"ind":21,"hd":false,"nm":"icon - Null","ks":{"a":{"a":0,"k":[14,14]},"o":{"a":0,"k":100},"p":{"a":0,"k":[19.5,20]},"r":{"a":0,"k":0},"s":{"a":1,"k":[{"t":83.39999999999999,"s":[-0.1,-0.1],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]}},{"t":129.60000000000002,"s":[100,100]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ty":3,"ddd":0,"ind":22,"hd":false,"nm":"check, checmark - Null","parent":21,"ks":{"a":{"a":0,"k":[6,6]},"o":{"a":0,"k":100},"p":{"a":0,"k":[14,14]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ddd":0,"ind":23,"ty":0,"nm":"check, checmark","td":1,"refId":"538:1273","sr":1,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"ao":0,"w":40,"h":40,"ip":0,"op":129.60000000000002,"st":0,"hd":false,"bm":0},{"ddd":0,"ind":24,"ty":0,"nm":"check, checmark","refId":"ltgojk9vajqo3xuqysw","sr":1,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"ao":0,"w":40,"h":40,"ip":0,"op":129.60000000000002,"st":0,"hd":false,"bm":0,"tt":1},{"ty":4,"ddd":0,"ind":25,"hd":false,"nm":"icon","parent":17,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"st":0,"ip":75,"op":240,"bm":0,"sr":1,"shapes":[{"ty":"gr","nm":"Group","hd":false,"np":3,"it":[{"ty":"sh","nm":"Path","hd":false,"ks":{"a":0,"k":{"c":true,"v":[[14,0],[14,0],[28,14],[28,14],[14,28],[14,28],[0,14],[0,14],[14,0],[14,0]],"i":[[0,0],[0,0],[0,-7.732],[0,0],[7.732,0],[0,0],[0,7.732],[0,0],[-7.732,0],[0,0]],"o":[[0,0],[7.73199,0],[0,0],[0,7.73199],[0,0],[-7.73199,0],[0,0],[0,-7.73199],[0,0],[0,0]]}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[1,1,1,1]},"nm":"Fill","hd":false,"r":1},{"ty":"tr","a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]}]},{"nm":"logo","fr":60,"id":"ltgojk9qxrn7edmrf1","layers":[{"ty":3,"ddd":0,"ind":26,"hd":false,"nm":"logo - Null","ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":0,"op":129.60000000000002,"bm":0,"sr":1},{"ddd":0,"ind":27,"ty":0,"nm":"icon","refId":"ltgojk9svnf3mrgghfq","sr":1,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"ao":0,"w":40,"h":40,"ip":0,"op":129.60000000000002,"st":0,"hd":false,"bm":0},{"ty":3,"ddd":0,"ind":28,"hd":false,"nm":"Group 7230 - Null","ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[5,10]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":0,"op":129.60000000000002,"bm":0,"sr":1},{"ty":3,"ddd":0,"ind":29,"hd":false,"nm":"Vector - Null","parent":28,"ks":{"a":{"a":0,"k":[10,10]},"o":{"a":0,"k":100},"p":{"a":1,"k":[{"t":0,"s":[19,10],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]},"ti":[0,0],"to":[0,0]},{"t":37.2,"s":[14.5,10]}]},"r":{"a":0,"k":0},"s":{"a":1,"k":[{"t":39.6,"s":[100,100],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]}},{"t":40.800000000000004,"s":[98.17,98.17],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]}},{"t":76.8,"s":[-0.1,-0.1]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":0,"op":129.60000000000002,"bm":0,"sr":1},{"ty":4,"ddd":0,"ind":30,"hd":false,"nm":"Vector","parent":29,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"st":0,"ip":0,"op":129.60000000000002,"bm":0,"sr":1,"shapes":[{"ty":"gr","nm":"Group","hd":false,"np":3,"it":[{"ty":"sh","nm":"Path","hd":false,"ks":{"a":0,"k":{"c":true,"v":[[9.3499,0.0101],[15.9234,3.8396],[19.9895,10.3292],[16.6625,17.5485],[9.3499,19.9831],[1.6132,17.9671],[0.0587,10.3292],[2.0807,3.1528],[9.3499,0.0101],[9.3499,0.0101]],"i":[[0,0],[-1.8867,-1.8299],[-0.1424,-2.6405],[2.0497,-1.8598],[2.6731,-0.0744],[1.9099,1.9844],[-0.0852,2.6983],[-1.737,1.9292],[-2.7464,-0.1363],[0,0]],"o":[[2.641540000000001,0.13106],[1.9106500000000004,1.8530800000000003],[0.14798000000000044,2.744489999999999],[-1.9689200000000007,1.7865199999999994],[-2.7716399999999997,0.0771000000000015],[-1.88353,-1.9570800000000013],[0.08142000000000002,-2.57993],[1.8269200000000003,-2.02903],[0,0],[0,0]]}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[1,1,1,1]},"nm":"Fill","hd":false,"r":2},{"ty":"tr","a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]},{"ty":3,"ddd":0,"ind":31,"hd":false,"nm":"Vector - Null","parent":28,"ks":{"a":{"a":0,"k":[10,10]},"o":{"a":0,"k":100},"p":{"a":1,"k":[{"t":0,"s":[16,10],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]},"ti":[0,0],"to":[0,0]},{"t":37.2,"s":[14.5,10]}]},"r":{"a":0,"k":0},"s":{"a":1,"k":[{"t":37.8,"s":[100,100],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]}},{"t":73.8,"s":[-0.1,-0.1]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":0,"op":129.60000000000002,"bm":0,"sr":1},{"ty":4,"ddd":0,"ind":32,"hd":false,"nm":"Vector","parent":31,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"st":0,"ip":0,"op":129.60000000000002,"bm":0,"sr":1,"shapes":[{"ty":"gr","nm":"Group","hd":false,"np":3,"it":[{"ty":"sh","nm":"Path","hd":false,"ks":{"a":0,"k":{"c":true,"v":[[9.3499,0.0101],[15.9234,3.8396],[19.9895,10.3292],[16.6625,17.5485],[9.3499,19.9831],[1.6132,17.9671],[0.0587,10.3292],[2.0807,3.1528],[9.3499,0.0101],[9.3499,0.0101]],"i":[[0,0],[-1.8867,-1.8299],[-0.1424,-2.6405],[2.0497,-1.8598],[2.6731,-0.0744],[1.9099,1.9844],[-0.0852,2.6983],[-1.737,1.9292],[-2.7464,-0.1363],[0,0]],"o":[[2.641540000000001,0.13106],[1.9106500000000004,1.8530800000000003],[0.14798000000000044,2.744489999999999],[-1.9689200000000007,1.7865199999999994],[-2.7716399999999997,0.0771000000000015],[-1.88353,-1.9570800000000013],[0.08142000000000002,-2.57993],[1.8269200000000003,-2.02903],[0,0],[0,0]]}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.792156862745098,0.8941176470588236,0.9921568627450981,1]},"nm":"Fill","hd":false,"r":2},{"ty":"tr","a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]},{"ty":3,"ddd":0,"ind":33,"hd":false,"nm":"Vector - Null","parent":28,"ks":{"a":{"a":0,"k":[10,10]},"o":{"a":0,"k":100},"p":{"a":1,"k":[{"t":0,"s":[13,10],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]},"ti":[0,0],"to":[0,0]},{"t":37.2,"s":[14.5,10]}]},"r":{"a":0,"k":0},"s":{"a":1,"k":[{"t":36,"s":[100,100],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]}},{"t":72,"s":[-0.1,-0.1]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":0,"op":129.60000000000002,"bm":0,"sr":1},{"ty":4,"ddd":0,"ind":34,"hd":false,"nm":"Vector","parent":33,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"st":0,"ip":0,"op":129.60000000000002,"bm":0,"sr":1,"shapes":[{"ty":"gr","nm":"Group","hd":false,"np":3,"it":[{"ty":"sh","nm":"Path","hd":false,"ks":{"a":0,"k":{"c":true,"v":[[9.3499,0.0101],[15.9234,3.8396],[19.9895,10.3292],[16.6625,17.5485],[9.3499,19.9831],[1.6132,17.9671],[0.0587,10.3292],[2.0807,3.1528],[9.3499,0.0101],[9.3499,0.0101]],"i":[[0,0],[-1.8867,-1.8299],[-0.1424,-2.6405],[2.0497,-1.8598],[2.6731,-0.0744],[1.9099,1.9844],[-0.0852,2.6983],[-1.737,1.9292],[-2.7464,-0.1363],[0,0]],"o":[[2.641540000000001,0.13106],[1.9106500000000004,1.8530800000000003],[0.14798000000000044,2.744489999999999],[-1.9689200000000007,1.7865199999999994],[-2.7716399999999997,0.0771000000000015],[-1.88353,-1.9570800000000013],[0.08142000000000002,-2.57993],[1.8269200000000003,-2.02903],[0,0],[0,0]]}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.5411764705882353,0.7686274509803922,0.9803921568627451,1]},"nm":"Fill","hd":false,"r":2},{"ty":"tr","a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]},{"ty":3,"ddd":0,"ind":35,"hd":false,"nm":"Vector - Null","parent":28,"ks":{"a":{"a":0,"k":[10,10]},"o":{"a":0,"k":100},"p":{"a":1,"k":[{"t":0,"s":[10,10],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]},"ti":[0,0],"to":[0,0]},{"t":37.2,"s":[14.5,10]}]},"r":{"a":0,"k":0},"s":{"a":1,"k":[{"t":46.800000000000004,"s":[100,100],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]}},{"t":82.8,"s":[-0.1,-0.1]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":0,"op":129.60000000000002,"bm":0,"sr":1},{"ty":4,"ddd":0,"ind":36,"hd":false,"nm":"Vector","parent":35,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"st":0,"ip":0,"op":129.60000000000002,"bm":0,"sr":1,"shapes":[{"ty":"gr","nm":"Group","hd":false,"np":3,"it":[{"ty":"sh","nm":"Path","hd":false,"ks":{"a":0,"k":{"c":true,"v":[[9.3499,0.0101],[15.9234,3.8396],[19.9895,10.3292],[16.6625,17.5485],[9.3499,19.9831],[1.6132,17.9671],[0.0587,10.3292],[2.0807,3.1528],[9.3499,0.0101],[9.3499,0.0101]],"i":[[0,0],[-1.8867,-1.8299],[-0.1424,-2.6405],[2.0497,-1.8598],[2.6731,-0.0744],[1.9099,1.9844],[-0.0852,2.6983],[-1.737,1.9292],[-2.7464,-0.1363],[0,0]],"o":[[2.641540000000001,0.13106],[1.9106500000000004,1.8530800000000003],[0.14798000000000044,2.744489999999999],[-1.9689200000000007,1.7865199999999994],[-2.7716399999999997,0.0771000000000015],[-1.88353,-1.9570800000000013],[0.08142000000000002,-2.57993],[1.8269200000000003,-2.02903],[0,0],[0,0]]}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.29411764705882354,0.6431372549019608,0.9686274509803922,1]},"nm":"Fill","hd":false,"r":2},{"ty":"tr","a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]},{"ty":4,"ddd":0,"ind":37,"hd":false,"nm":"logo","parent":26,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"st":0,"ip":0,"op":129.60000000000002,"bm":0,"sr":1,"shapes":[{"ty":"gr","nm":"Group","hd":false,"np":3,"it":[{"ty":"sh","nm":"Path","hd":false,"ks":{"a":0,"k":{"c":true,"v":[[12,0],[28,0],[40,12],[40,28],[28,40],[12,40],[0,28],[0,12],[12,0],[12,0]],"i":[[0,0],[0,0],[0,-6.6274],[0,0],[6.6274,0],[0,0],[0,6.6274],[0,0],[-6.6274,0],[0,0]],"o":[[0,0],[6.627420000000001,0],[0,0],[0,6.627420000000001],[0,0],[-6.62742,0],[0,0],[0,-6.62742],[0,0],[0,0]]}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.058823529411764705,0.5254901960784314,0.9607843137254902,1]},"nm":"Fill","hd":false,"r":1},{"ty":"tr","a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]}]}],"layers":[{"ty":3,"ddd":0,"ind":26,"hd":false,"nm":"logo - Null","ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":0,"op":129.60000000000002,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":0,"nm":"logo","refId":"ltgojk9qxrn7edmrf1","sr":1,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"ao":0,"w":40,"h":40,"ip":0,"op":129.60000000000002,"st":0,"hd":false,"bm":0}],"meta":{"a":"","d":"","tc":"","g":"Aninix"}}
\ No newline at end of file
diff --git a/packages/frontend/src/components/shared/CustomIcon/ArrowLeftCircleFilledIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/ArrowLeftCircleFilledIcon.tsx
new file mode 100644
index 00000000..a2d348d5
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/ArrowLeftCircleFilledIcon.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const ArrowLeftCircleFilledIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM10.4697 15.7803C10.7626 16.0732 11.2374 16.0732 11.5303 15.7803C11.8232 15.4874 11.8232 15.0126 11.5303 14.7197L9.56066 12.75H16.25C16.6642 12.75 17 12.4142 17 12C17 11.5858 16.6642 11.25 16.25 11.25H9.56066L11.5303 9.28033C11.8232 8.98744 11.8232 8.51256 11.5303 8.21967C11.2374 7.92678 10.7626 7.92678 10.4697 8.21967L7.21967 11.4697C6.92678 11.7626 6.92678 12.2374 7.21967 12.5303L10.4697 15.7803Z"
+        fill="currentColor"
+      />
+    </CustomIcon>
+  );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/QuestionMarkRoundFilledIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/QuestionMarkRoundFilledIcon.tsx
new file mode 100644
index 00000000..7e1d9fe5
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/QuestionMarkRoundFilledIcon.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const QuestionMarkRoundFilledIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM10 7C9.62268 7 9.29263 7.2086 9.12148 7.52152C8.85646 8.00606 8.24881 8.18401 7.76427 7.91899C7.27973 7.65396 7.10178 7.04632 7.3668 6.56178C7.87463 5.63331 8.86264 5 10 5C11.5148 5 12.5669 6.00643 12.8664 7.189C13.1676 8.37785 12.7101 9.76299 11.3416 10.4472C11.1323 10.5519 11 10.7659 11 11C11 11.5523 10.5523 12 10 12C9.44772 12 9.00001 11.5523 9.00001 11C9.00001 10.0084 9.56027 9.10183 10.4472 8.65836C10.902 8.43099 11.0188 8.03973 10.9277 7.6801C10.835 7.31417 10.5283 7 10 7ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z"
+        fill="currentColor"
+      />
+    </CustomIcon>
+  );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts
index 5b853217..74e3cbfe 100644
--- a/packages/frontend/src/components/shared/CustomIcon/index.ts
+++ b/packages/frontend/src/components/shared/CustomIcon/index.ts
@@ -18,6 +18,7 @@ export * from './FolderIcon';
 export * from './SettingsSlidersIcon';
 export * from './LifeBuoyIcon';
 export * from './QuestionMarkRoundIcon';
+export * from './QuestionMarkRoundFilledIcon';
 export * from './GitIcon';
 export * from './EllipseIcon';
 export * from './EllipsesIcon';
@@ -38,6 +39,7 @@ export * from './WarningDiamondIcon';
 export * from './ArrowRightCircleIcon';
 export * from './ClockOutlineIcon';
 export * from './ArrowRightCircleFilledIcon';
+export * from './ArrowLeftCircleFilledIcon';
 export * from './GithubStrokeIcon';
 export * from './BranchStrokeIcon';
 export * from './StorageIcon';
diff --git a/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx b/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx
index 940df255..ae7779e8 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx
@@ -1,82 +1,106 @@
 import React from 'react';
 import { Link, useParams } from 'react-router-dom';
+import Lottie from 'lottie-react';
 
-import { Button } from '@material-tailwind/react';
+import { Badge } from 'components/shared/Badge';
+import { Button } from 'components/shared/Button';
+import {
+  ArrowLeftCircleFilledIcon,
+  LinkChainIcon,
+  QuestionMarkRoundFilledIcon,
+} from 'components/shared/CustomIcon';
+import { Heading } from 'components/shared/Heading';
+
+import logoAnimation from 'components/../../public/lottie/logo.json';
 
 const Id = () => {
   const { id, orgSlug } = useParams();
+
+  const handleSetupDomain = () => {
+    //TODO: Implement this
+  };
   return (
-    <div className="flex justify-center">
-      <div className="w-1/2">
-        <div className="flex justify-center">^</div>
-        <div className="flex flex-col items-center my-10">
-          <div>
-            <h4>Project deployed successfully.</h4>
-          </div>
-          <div>
-            <span>
-              Your project has been deployed at{' '}
-              <Link to="https://www.iglootools.snowballtools.xyz">
-                <span className="text-blue-600">
-                  ^ www.iglootools.snowballtools.xyz
-                </span>
-              </Link>
-            </span>
+    <div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto py-6 lg:py-12">
+      {/* Icon */}
+      <div className="flex justify-center">
+        <Lottie animationData={logoAnimation} loop={false} size={40} />
+      </div>
+
+      {/* Heading */}
+      <div className="flex flex-col items-center gap-1.5">
+        <Heading as="h3" className="font-medium text-xl">
+          Project deployed successfully.
+        </Heading>
+        <p className="flex flex-col items-center lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
+          Your project has been deployed at{' '}
+          <Button
+            className="no-underline text-elements-link"
+            // TODO: use dynamic value
+            href="https://www.iglootools.snowballtools.xyz"
+            as="a"
+            variant="link-emphasized"
+            external
+            leftIcon={<LinkChainIcon />}
+          >
+            {/* // TODO: use dynamic value */}
+            www.iglootools.snowballtools.xyz
+          </Button>
+        </p>
+      </div>
+
+      {/* Card */}
+      <div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
+        {/* Trigger question */}
+        <div className="flex gap-2 justify-center items-center py-3">
+          <div className="h-5 w-5">
+            <QuestionMarkRoundFilledIcon size={18} />
           </div>
+          <Heading as="h5" className="font-sans font-medium text-sm">
+            {`Wondering what's next?`}
+          </Heading>
         </div>
 
-        <div className="bg-gray-100 rounded border w-full">
-          <div className="flex justify-center items-center h-14">
-            ^?&nbsp;<h6>Wondering what’s next?</h6>
-          </div>
-          <div className="bg-white rounded border w-full">
-            <div className="flex p-4">
-              <div className="w-6"> 1</div>
-              <div className="grow">
-                <h6>Add a custom domain</h6>
-                <p className="text-sm text-gray-500">
+        {/* CTA card */}
+        <div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
+          <div className="flex gap-2">
+            <Badge variant="secondary">1</Badge>
+            <div className="space-y-3">
+              <div className="flex flex-col gap-1">
+                <Heading as="h6" className="text-sm font-sans">
+                  Add a custom domain
+                </Heading>
+                <p className="text-xs text-elements-low-em font-sans">
                   Make it easy for your visitors to remember your URL with a
                   custom domain.
                 </p>
-                <div className="my-2">
-                  <Button
-                    className="rounded-full"
-                    variant="outlined"
-                    size="sm"
-                    placeholder={''}
-                  >
-                    Setup domain
-                  </Button>
-                </div>
               </div>
+              <Button onClick={handleSetupDomain} variant="tertiary" size="sm">
+                Setup domain
+              </Button>
             </div>
           </div>
         </div>
+      </div>
 
-        <div className="flex justify-center p-4 gap-2 my-5">
-          <div>
-            <Link to="/">
-              <Button
-                className="rounded-full"
-                variant="outlined"
-                placeholder={''}
-              >
-                ^Back to projects
-              </Button>
-            </Link>
-          </div>
-          <div>
-            <Link to={`/${orgSlug}/projects/${id}`}>
-              <Button
-                className="rounded-full"
-                variant="gradient"
-                color="blue"
-                placeholder={''}
-              >
-                View project
-              </Button>
-            </Link>
-          </div>
+      {/* CTA Buttons */}
+      <div className="flex flex-col lg:flex-row justify-center gap-3">
+        <div className="w-full lg:w-fit">
+          <Link to="/">
+            <Button
+              leftIcon={<ArrowLeftCircleFilledIcon />}
+              fullWidth
+              variant="tertiary"
+            >
+              Back to projects
+            </Button>
+          </Link>
+        </div>
+        <div className="w-full lg:w-fit">
+          <Link to={`/${orgSlug}/projects/${id}`}>
+            <Button fullWidth variant="primary">
+              View project
+            </Button>
+          </Link>
         </div>
       </div>
     </div>
diff --git a/yarn.lock b/yarn.lock
index 2708695e..40284615 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13006,6 +13006,18 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-react@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/lottie-react/-/lottie-react-2.4.0.tgz#f7249eee2b1deee70457a2d142194fdf2456e4bd"
+  integrity sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==
+  dependencies:
+    lottie-web "^5.10.2"
+
+lottie-web@^5.10.2:
+  version "5.12.2"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5"
+  integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==
+
 lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"