diff --git a/src/App.tsx b/src/App.tsx
index 5370f5285669702afac487346cab48dbf6483e89..72c9f6380db38b7ba132ee5034102f5253d7b70e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,6 @@
 import * as  React from 'react';
-// import logo from './logo.svg';
 import './App.css';
-import { SelectionPreview, BubblePreview, InsertionPreview, CombPreview, ShellPreview, CountingPreview } from './components/Preview/Preview';
-//import CountingPreview from './components/Preview/Counting';
+import { SelectionPreview, BubblePreview, InsertionPreview, CombPreview, ShellPreview, CountingPreview, CocktailPreview } from './components/Preview/Preview';
 import { 
   BrowserRouter as Router,
   Switch,
@@ -11,7 +9,6 @@ import {
 } from 'react-router-dom';
 
 function App() {
-  // const list = Array.from({length: 40}, () => Math.ceil(Math.random() * 40));
   return (
     <Router>
       <div>
@@ -38,6 +35,9 @@ function App() {
             <li>
               <Link to="/shell">Shell</Link>
             </li>
+            <li>
+              <Link to="/cocktail">Cocktail</Link>
+            </li>
           </ul>
         </nav>
 
@@ -91,6 +91,13 @@ function App() {
               </header>
             </div>
           </Route>
+          <Route path="/cocktail">
+            <div className="App">
+              <header className="App-header">
+                <CocktailPreview/>
+              </header>
+            </div>
+          </Route>
           <Route path="/">
             <Home />
           </Route>
diff --git a/src/components/Preview/Preview.tsx b/src/components/Preview/Preview.tsx
index 9cf3778bcc97ba5aca07d862cf7c0921a4896737..7921dde22915ad243cf964854f2b7d24ee40f125 100644
--- a/src/components/Preview/Preview.tsx
+++ b/src/components/Preview/Preview.tsx
@@ -1,6 +1,6 @@
 import { equals, isEmpty } from 'ramda';
 import { useState } from 'react';
-import { useSelectionSort, useBubbleSort, useInsertionSort, useCombSort, useShellSort, useCountingSort } from '../../hooks/algorithm';
+import { useSelectionSort, useBubbleSort, useInsertionSort, useCombSort, useShellSort, useCountingSort, useCocktailSort } from '../../hooks/algorithm';
 import { calculateColumnWidth, getRandomArray, getArray } from '../useFunctions/useFunctions';
 import { stringToArray } from '../../util/inputList';
 import { nearlySortedRandomList, reversedNearlySortedRandomList } from '../../util/generator';
@@ -215,6 +215,7 @@ const BubblePreview    = withSort(Preview, useBubbleSort);
 const CombPreview      = withSort(Preview, useCombSort);
 const ShellPreview     = withSort(Preview, useShellSort);
 const CountingPreview  = withSort(Preview, useCountingSort);
+const CocktailPreview  = withSort(Preview, useCocktailSort);
 
 export {
     SelectionPreview,
@@ -222,5 +223,6 @@ export {
     BubblePreview,
     CombPreview,
     ShellPreview,
-    CountingPreview
+    CountingPreview,
+    CocktailPreview
 }
diff --git a/src/hooks/algorithm.ts b/src/hooks/algorithm.ts
index a3470446e20ed653ea511e2c0a60cffc57b2f311..ca0ab80f71b069fec9daf8d17f4e4d09e19624da 100644
--- a/src/hooks/algorithm.ts
+++ b/src/hooks/algorithm.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { compose } from 'ramda';
-import { bubbleSortStep, insertionSortStep, selectionSortStep, combSortStep, shellSortStep, countingSortStep } from '../util/algorithm';
+import { bubbleSortStep, insertionSortStep, selectionSortStep, combSortStep, shellSortStep, countingSortStep, cocktailSortStep } from '../util/algorithm';
 
 import type { StepState } from '../util/algorithm';
 
@@ -154,11 +154,31 @@ function useCountingSort(list: number[], time: number, play: boolean) {
     return useSort(list, time, play, countingSortStep, initialState, highlight)
 }
 
+function getCocktailInitialState(items: number[]) : StepState {
+    return {
+        list: items,
+        index: 0,
+        keyIndex: items.length - 1,
+        flag: false,
+        secondFlag: true,
+        interval: 1,
+        temp: 0,
+        gap: 0
+    }
+}
+
+function useCocktailSort(list: number[], time: number, play: boolean) {
+    let initialState = getCocktailInitialState(list);
+    const highlight = ({ index }: StepState) => [index];
+    return useSort(list, time, play, cocktailSortStep, initialState, highlight)
+}
+
 export {
     useBubbleSort,
     useInsertionSort,
     useSelectionSort,
     useCombSort,
     useShellSort,
-    useCountingSort
+    useCountingSort,
+    useCocktailSort,
 }
diff --git a/src/util/algorithm.ts b/src/util/algorithm.ts
index 1d8a75df38105512b2e7b390f57f6650b57bc0f4..37d1ebf8802c5c95a4422513a036a6ab92f48d55 100644
--- a/src/util/algorithm.ts
+++ b/src/util/algorithm.ts
@@ -138,6 +138,48 @@ function countingSortStep(state: StepState) : StepState {
     }
 }
 
+function cocktailSortStep(
+    state: StepState
+) : StepState {
+    const {
+        list,
+        index,
+        keyIndex: lastIndex,
+        temp: firstIndex,
+        flag: swapped,
+        secondFlag: forward
+    } = state;
+
+    if (firstIndex === lastIndex) {
+        return state;
+    }
+    if (index === lastIndex && forward) {
+        if (swapped) {
+            return compose(moveBackward, moveBackward, decreaseLastIndex, flipDirection, swapFalse) (state);
+        } else {
+            return state;
+        }
+    } else if (index === firstIndex - 1 && !forward) {
+        if (swapped) {
+            return compose(moveForward, increaseFirstIndex, flipDirection, swapFalse) (state);
+        } else {
+            return state;
+        }
+    } else if (list[index] > list[index + 1]) {
+        if (forward) {
+            return compose(moveForward, swapForward, flagTrue) (state);
+        } else {
+            return compose(moveBackward, swapForward, flagTrue) (state);
+        }
+    } else {
+        if (forward) {
+            return moveForward(state);
+        } else {
+            return moveBackward(state);
+        }
+    }
+}
+
 function recountGap(state: StepState) : StepState {
     const {gap} = state;
     const newGap = Math.floor( gap*10/13 );
@@ -200,7 +242,6 @@ function swapToLastIndex(state: StepState) : StepState {
     }
 }
 
-
 function swapForward(state: StepState) : StepState {
     const { list, index } = state;
     const newList = list.slice(0, index)
@@ -277,13 +318,22 @@ function nextKey(state: StepState) : StepState {
     return { ...state, keyIndex: state.keyIndex+1, index: state.keyIndex+1, flag: false }
 }
 
+function increaseFirstIndex(state: StepState) : StepState {
+    return { ...state, temp: state.temp + 1}
+}
+
+function flipDirection(state: StepState) : StepState {
+    return { ...state, secondFlag: !state.secondFlag}
+}
+
 export {
     bubbleSortStep,
     insertionSortStep,
     selectionSortStep,
     combSortStep,
     shellSortStep,
-    countingSortStep
+    countingSortStep,
+    cocktailSortStep
 }
 
 export type {