diff --git a/package-lock.json b/package-lock.json
index 8c817555..79145fae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@next/font": "13.1.1",
         "@notionhq/client": "^2.2.3",
+        "@rapiders/react-hooks": "^1.2.1",
         "@types/gtag.js": "^0.0.18",
         "@types/node": "18.11.18",
         "@types/react": "18.0.26",
@@ -2476,6 +2477,15 @@
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
       "dev": true
     },
+    "node_modules/@rapiders/react-hooks": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@rapiders/react-hooks/-/react-hooks-1.2.1.tgz",
+      "integrity": "sha512-IrD65nXCLMP5Z/KP3aoZAMdG58XvnHG/Twwk4GnUXygpqrAcenngnCyzrj2jx14kZbeehtu81sBPMWOjdjp+1g==",
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
@@ -15419,6 +15429,12 @@
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
       "dev": true
     },
+    "@rapiders/react-hooks": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@rapiders/react-hooks/-/react-hooks-1.2.1.tgz",
+      "integrity": "sha512-IrD65nXCLMP5Z/KP3aoZAMdG58XvnHG/Twwk4GnUXygpqrAcenngnCyzrj2jx14kZbeehtu81sBPMWOjdjp+1g==",
+      "requires": {}
+    },
     "@rushstack/eslint-patch": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
diff --git a/package.json b/package.json
index 06c5d6ae..709701e8 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@next/font": "13.1.1",
     "@notionhq/client": "^2.2.3",
+    "@rapiders/react-hooks": "^1.2.1",
     "@types/gtag.js": "^0.0.18",
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",
diff --git a/src/components/archiving/Carousel.tsx b/src/components/archiving/Carousel.tsx
index 9a1cd3c6..be1a7fdc 100644
--- a/src/components/archiving/Carousel.tsx
+++ b/src/components/archiving/Carousel.tsx
@@ -1,50 +1,26 @@
-import { useState } from 'react';
+import { useEffect } from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
-import { AnimatePresence, motion, PanInfo } from 'framer-motion';
-import { useInterval } from 'src/hooks/useInterval';
-import useSlider from 'src/hooks/useSlider';
+import { useDragIndexCarousel, useInterval } from '@rapiders/react-hooks';
 
-const Carousel = ({ images }: { images: string[]; }) => {
-  const [index, direction, increase, decrease, animateVariant] = useSlider<string>(images, 0.1, 1000, false, 'tween');
-  const [timerBool, setTimerBool] = useState(true);
-  const [dragStartX, setdragStartX] = useState(0);
-  useInterval(increase, 3000, timerBool);
+const Carousel = ({ images }: { images: string[] }) => {
+  const { CarouselWrapper, ref, next, index, isDragging } = useDragIndexCarousel(images.length, { infinity: true });
+  const { stop, continueTimer } = useInterval(next, 3000);
+
+  useEffect(() => {
+    if (isDragging) stop();
+    else continueTimer();
+  }, [isDragging]);
 
-  const handleScroll = (_: any, info: PanInfo) => {
-    setTimerBool((prev) => (prev = true));
-    if (dragStartX > info.point.x) increase();
-    else decrease();
-  };
   return (
     <Wrapper>
-      <CarouselWrapper>
-        <AnimatePresence initial={false} custom={direction}>
-          <ImageWrapper
-            key={index}
-            variants={animateVariant}
-            initial="initial"
-            animate="visible"
-            exit="exit"
-            drag={images.length === 1 ? false : 'x'}
-            onDragStart={(_, info) => {
-              setTimerBool((prev) => (prev = false));
-              setdragStartX((prev) => (prev = info.point.x));
-            }}
-            onDragEnd={handleScroll}
-            custom={direction}
-          >
-            <CustomImage
-              src={images[index]}
-              alt="img"
-              layout="fill"
-              objectFit="contain"
-              objectPosition="center"
-            />
-          </ImageWrapper>
-        </AnimatePresence>
+      <CarouselWrapper ref={ref} className="carouselWrapper">
+        {images.map((img) => (
+          <div style={{ width: '100%', backgroundColor: 'white' }} key={img}>
+            <img src={img} draggable={false} style={{ objectFit: 'contain', width: '100%', height: '100%' }} />
+          </div>
+        ))}
       </CarouselWrapper>
-
       <DiamondWrapper>
         {Array.from({ length: images.length }, (_, i) => i).map((i) => (
           <Diamond key={i} color={index === i ? '#1a21bd' : '#F0F1FF'} />
@@ -67,17 +43,7 @@ const CustomImage = styled(Image)`
   cursor: pointer;
   -webkit-user-drag: none;
 `;
-const CarouselWrapper = styled.div`
-  position: relative;
-  width: 100%;
-  height: 50vh;
-  border-radius: 30px;
-  border: none;
-  overflow: hidden;
-  @media (max-width: 900px) {
-    height: 30vh;
-  }
-`;
+
 const DiamondWrapper = styled.div`
   display: flex;
   width: 100%;
@@ -85,13 +51,7 @@ const DiamondWrapper = styled.div`
   align-items: center;
   margin-top: 20px;
 `;
-const ImageWrapper = styled(motion.div)`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 30px;
-  border: none;
-`;
+
 const Diamond = styled.div`
   width: 7px;
   height: 7px;
diff --git a/src/styles/global.css b/src/styles/global.css
index acbd1fa4..0701c244 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -86,3 +86,15 @@ a {
 * {
   box-sizing: border-box;
 }
+
+.carouselWrapper {
+  position: relative;
+  width: 100%;
+  height: 50vh;
+  border-radius: 30px;
+  border: none;
+  overflow: hidden;
+  @media (max-width: 900px) {
+    height: 30vh;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index c94e67b4..f017be5c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1298,6 +1298,11 @@
   resolved "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
+"@rapiders/react-hooks@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@rapiders/react-hooks/-/react-hooks-1.2.1.tgz"
+  integrity sha512-IrD65nXCLMP5Z/KP3aoZAMdG58XvnHG/Twwk4GnUXygpqrAcenngnCyzrj2jx14kZbeehtu81sBPMWOjdjp+1g==
+
 "@rushstack/eslint-patch@^1.1.3":
   version "1.2.0"
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz"
@@ -6331,7 +6336,7 @@ react-cookies@^0.1.1:
     cookie "^0.3.1"
     object-assign "^4.1.1"
 
-"react-dom@^17.0.2 || ^18.0.0-0", react-dom@^18.0.0, "react-dom@>= 16.8.0", react-dom@18.2.0:
+"react-dom@^17.0.2 || ^18.0.0-0", react-dom@^18.0.0, react-dom@^18.2.0, "react-dom@>= 16.8.0", react-dom@18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==